<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    draggable
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': true} }"
    @cancel="handleCancel"
    :cancelButtonProps="{ class:{'jee-hidden': true} }"
    cancelText="关闭">
    <!-- table区域-begin -->
    <div>
      <vxe-grid
        style="width: 100%;"
        :height="500"
        size="mini"
        align="center"
        highlight-hover-row
        stripe
        row-key
        row-id="selectedRowKeys"
        column-min-width="150"
        id="id"
        keep-source
        :loading="loading"
        border
        resizable
        showOverflow
        showHeaderOverflow
        v-bind="options"
        :pager-config="tablePage"
        ref="xGrid"
        :row-config="{ useKey: true,keyField: 'id',isCurrent:true,isHover:true}"
        :checkbox-config="{
          checkRowKeys:selectedRowKeys,
          trigger: 'row',
          highlight: true,
          reserve: true}"
        @sort-change="sortChange"
        @checkbox-change="checkboxChangeEvent"
        @checkbox-all="checkboxChangeEvent"
        :data="dataSource"
        :columns="columns"
        @page-change="handlePageChange"
      >
        <template v-slot:toolbar_buttons>
          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <a-button @click="handleAdd" type="primary" icon="plus">添加PDA权限</a-button>
            <!-- 高级查询区域 -->
            <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
            <a-dropdown v-if="selectedRowKeys.length > 0">
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
              </a-menu>
              <a-button type="primary" icon="down">批量操作</a-button>
            </a-dropdown>
          </div>
        </template>
      </vxe-grid>
    </div>
    <sys-app-menu-bunding-modal ref="SysAppMenuBundingModal" @ok="refreshCurrentPage"></sys-app-menu-bunding-modal>
  </j-modal>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { HYListMixin } from '@/mixins/HYListMixin'
  import {getAction, postAction} from "@api/manage";
  import SysAppMenuBundingModal from './SysAppMenuBundingModal'


  export default {
    name: 'SysAppMenuList',
    mixins:[HYListMixin, mixinDevice],
    components: {SysAppMenuBundingModal},
    data () {
      return {
        title: 'PDA已有菜单权限',
        width:1280,
        visible:false,
        currentRoleId:'',
        disableMixinCreated:true,
        // 表头
        columns: [
          {type: "checkbox", width: 50, align: "center"},//多选
          {type: "seq", width: 50, align: "center"},//
          {
            title:'标题',
            align:"center",
            field: 'title'
          },
          {
            title:'图标',
            align:"center",
            field: 'icon'
          },
          {
            title:'页面路径',
            align:"center",
            field: 'page'
          }
        ],
        url: {
          list: "/basic/sysAppMenu/showPermission",
          delete: "/basic/sysAppMenu/delete",
          deleteBatch: "/basic/sysAppMenu/deleteBunding",
          exportXlsUrl: "/basic/sysAppMenu/exportXls",
          importExcelUrl: "basic/sysAppMenu/importExcel",
          
        },
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
    this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      refreshCurrentPage(){
        this.show(this.currentRoleId);
      },
      handleAdd(){
        this.$nextTick(() => {
          this.$refs.SysAppMenuBundingModal.show(this.currentRoleId);
        });
      },
      show(roleId){
        this.currentRoleId = roleId;
        getAction(this.url.list, {currentRoleId: this.currentRoleId,
          pageNo : this.tablePage.currentPage,
          pageSize : this.tablePage.pageSize}).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.tablePage.total = res.result.total;
          } else {
            this.dataSource = null;
          }
        })
        this.visible = true;
      },
      loadData() {
        getAction(this.url.list, {
          currentRoleId: this.currentRoleId,
          pageNo: this.tablePage.currentPage,
          pageSize: this.tablePage.pageSize
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.tablePage.total = res.result.total;
          } else {
            this.dataSource = null;
          }
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
      },
      handleCancel () {
        this.close()
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'title',text:'标题',dictCode:''})
        fieldList.push({type:'string',value:'icon',text:'图标',dictCode:''})
        fieldList.push({type:'string',value:'page',text:'页面路径',dictCode:''})
        this.superFieldList = fieldList
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>